<template>
  <el-dialog
      v-model="visible"
      title="登录记录详情"
      width="55%"
      :before-close="handleClose"
      top="5vh"
  >
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-descriptions v-else :column="2" border>
      <!-- 基础信息 -->
      <el-descriptions-item label="记录ID" min-width="120">{{ detailData.id || '-' }}</el-descriptions-item>
      <el-descriptions-item label="用户ID">{{ detailData.userId || '-' }}</el-descriptions-item>

      <!-- 登录信息 -->
      <el-descriptions-item label="登录IP">
        <el-tag v-if="detailData.ipaddr">{{ detailData.ipaddr }}</el-tag>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="登录状态">
        <el-tag :type="detailData.status === '0' ? 'danger' : 'success'">
          {{ formatStatus(detailData.status) }}
        </el-tag>
      </el-descriptions-item>

      <!-- 时间信息 -->
      <el-descriptions-item label="登录时间">
        <div v-if="detailData.createTime">
          {{ (detailData.createTime) }}
          <el-tag size="small" type="info" style="margin-left: 8px">
            {{ (detailData.createTime) }}
          </el-tag>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ (detailData.updateTime) || '-' }}
      </el-descriptions-item>

      <!-- 其他信息 -->
      <el-descriptions-item label="操作消息" :span="2">
        <div class="message-content">
          {{ detailData.msg || '无操作消息' }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item label="创建人">{{ detailData.createBy || '系统' }}</el-descriptions-item>
      <el-descriptions-item label="更新人">{{ detailData.updateBy || '系统' }}</el-descriptions-item>

      <el-descriptions-item label="备注" :span="2">
        {{ detailData.remark || '无备注信息' }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getUserLoginLog } from '@/api/vipUser/userLoginLog'


const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  logId: {
    type: [Number, String],
    required: true
  }
})

const emit = defineEmits(['update:visible'])

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const loading = ref(false)
const detailData = ref(initDetailData())

function initDetailData() {
  return {
    id: null,
    userId: null,
    ipaddr: null,
    status: null,
    msg: null,
    createTime: null,
    createBy: null,
    updateTime: null,
    updateBy: null,
    delFlag: null,
    remark: null
  }
}

// 状态格式化
const formatStatus = (status) => {
  const statusMap = {
    '0': '登录失败',
    '1': '登录成功',
    '2': '账号锁定'
  }
  return status !== null ? statusMap[status] || '未知状态' : '-'
}

// 获取详情数据
const fetchDetail = async () => {
  try {
    loading.value = true
    const res = await getUserLoginLog(props.logId)
    detailData.value = res.data || initDetailData()
  } catch (error) {
    console.error('获取登录记录详情失败:', error)
    ElMessage.error('获取详情失败: ' + (error.message || '服务器错误'))
  } finally {
    loading.value = false
  }
}

const handleClose = () => {
  visible.value = false
}

watch(visible, (val) => {
  if (val) {
    fetchDetail()
  } else {
    detailData.value = initDetailData()
  }
})
</script>

<style scoped>
.el-descriptions {
  margin-top: 15px;
}

.message-content {
  padding: 8px;
  background-color: #f8f8f8;
  border-radius: 4px;
  white-space: pre-wrap;
}

.el-tag {
  margin-right: 5px;
}
</style>